<template>

  <div id='detail' :class="isDark === true?'Dark':' '">
    <v-touch @swiperight="swiperight" class="v-touch">
       <div class="details">
          <h2>{{res.title}}</h2>
     <!-- 发布者个人信息 -->
      <div class="mediaUser">
          <img :src="media.avatar_url" alt="">
          <p :style="`font-size:`+(parseInt(subjectFont)-2)+`px`">{{media.screen_name}}</p>
      </div>
      <!-- 发布时间 -->
      <p class="p_time" :style="`font-size:`+(parseInt(subjectFont)-4)+`px`"> {{time}}</p>
      <!-- 文章内容的展示 -->
      <div v-html="res.content" class="content" @click="imageEnlargemet" :style="`font-size:`+(parseInt(subjectFont)-1)+`px`"></div>
     </div>
      <div v-if="isdl == 1">
         <!-- 实现收藏 -->
     <div class="collection" @click="isStar">
        <div v-if='star==1'>
          <img src="../../assets/newsDetail/col.png" alt="">
          </div>
          <div v-else >
        <img src="../../assets/newsDetail/cocol.png" alt="">
        </div>
     </div>
     <!-- 实现点赞 -->
     <div class="like" @click="isLike">
        <div v-if='like==1'>
          <img src="../../assets/newsDetail/like.png" alt="">
          </div>
          <div v-else >
        <img src="../../assets/newsDetail/colike.png" alt="">
        </div>
     </div>
      </div>
     <!-- 评论 -->
     <newcommonts :comment="res"></newcommonts>
    </v-touch>
    <!-- 放大图片 -->
     <showBigImg :bigImg="bigImg" :visible="visible" :imgurl="imgurl" @closeClick="()=>{visible=false}" @changeBigImg='changeBigImg'></showBigImg>
  </div>
</template>

<script>
import { getNewsDetail } from "../../api/getNewsDetail";
import { formatDate } from '../../common/utils'  ;
import newcommonts from './newcommont.vue';
import showBigImg from './showBigImg.vue';
import { mapState } from 'vuex'

export default {
    name:'newDetail',
    data(){
        return{
            ID:'', //文章的ID
            res:{},//详情返回的结果
            time:'',//发布时间
            media:'',//作者信息
            star:1,//判断是否收藏
            like:1, //判断是否点赞
            bigImg:'',//存放点击的图片
            visible:false, //判断放大的图片是否要显示
            imgurl:[],//存放该文章的图片
            isdl:0,//存放用户是否登录
        }
    },
    created(){
      //该文章的ID
        this.ID = this.$route.params.id;
        //判断该文章是否被收藏
        this.$axios.post('https://qc3atp.api.cloudendpoint.cn/getcollection',{"newId":this.ID},{
            headers:{"authorization":window.localStorage.getItem('token')},
          }).then(res=>{
            if(res.data.result == 0) this.star = 1;
            if(res.data.result == 1) this.star = 0;
          }).catch(err=>{
            console.log(err)
          })
         //判断该文章是否被收藏
        this.$axios.post('https://qc3atp.api.cloudendpoint.cn/getLike',{"newId":this.ID},{
            headers:{"authorization":window.localStorage.getItem('token')},
          }).then(res=>{
            if(res.data.result == 0) this.like = 1;
            if(res.data.result == 1) this.like = 0;
          }).catch(err=>{
            console.log(err)
          })
          //获得该文章的详情信息
        getNewsDetail(this.ID).then(res=>{
            this.res = res.data;
            this.media = res.data.media_user;
            this.gid = res.data.gid;
            this.time = formatDate(this.res.publish_time, 'onlyDate');
        });
         //判断localStorage是否有token信息的存在
         if(localStorage.getItem('token')!=null){
           this.isdl=1
         }else{
           this.isdl=0;
         }
    },
   
    methods:{
        //实现收藏功能
         isStar(){
             //如果文章还没有被收藏，则收藏
        if(this.star == 1){
          this.$axios.post('https://qc3atp.api.cloudendpoint.cn/setcollection',{"newId":this.gid},{
            headers:{"authorization":window.localStorage.getItem('token')},
          }).then(res=>{
           if(res) return;
          }).catch(err=>{
            console.log(err)
          })
        }else{
            //取消收藏
             this.$axios.post('https://qc3atp.api.cloudendpoint.cn/removecollection',{"newId":this.gid},{
            headers:{"authorization":window.localStorage.getItem('token')},
          }).then(res=>{
            if(res) return;
            return;
          }).catch(err=>{
            console.log(err)
          })
            
        }
        this.star = !this.star;
      },
      //实现点赞功能
        isLike(){
             //如果文章还没有被点赞，则点赞
        if(this.like == 1){
          this.$axios.post('https://qc3atp.api.cloudendpoint.cn/setLike',{"newId":this.gid},{
            headers:{"authorization":window.localStorage.getItem('token')},
          }).then(res=>{
           if(res)return;
            return;
          }).catch(err=>{
            console.log(err)
          })
        }else{
            //取消点赞
             this.$axios.post('https://qc3atp.api.cloudendpoint.cn/removeLike',{"newId":this.gid},{
            headers:{"authorization":window.localStorage.getItem('token')},
          }).then(res=>{
            if(res)return;
            return;
          }).catch(err=>{
            console.log(err)
          })
            
        }
        this.like = !this.like;
      },
      //实现点击图片放大功能
        imageEnlargemet(e){
            if (e.target.nodeName == 'IMG') {
                this.visible = true;
                this.bigImg = e.target.currentSrc;
                // var content = document.querySelector('.content');
            }
    },
    //获得文章内所有的图片
    getImgs(){
       this.imgurl = [];
       var imgs = document.querySelector('.content').querySelectorAll('img');
                for(let i=0;i<imgs.length;i++){
                    this.imgurl.push(imgs[i].src);
                }          
    },
    //通过滑动修改子组件放大的图片
    changeBigImg(val){
      this.bigImg = val;
    },
    swiperight(){
      this.$router.go(-1);
    }
    },
    beforeUpdate:function(){
      this.getImgs();
    },

    components:{
        newcommonts,
        showBigImg
    },
    mounted() {
    },
    computed:{
      ...mapState(['subjectFont','isDark'])
    }
}
</script>

<style lang="less">
#detail{
    padding: 10px 3%;
    margin-top:3rem ;
}
.collection{
        position: fixed;
    right: 19px;
    bottom: 11px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.like{
    position: fixed;
    right: 19px;
    bottom: 80px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.like img{
  width: 100%;
}
.collection img{
    width: 100%;
}
.mediaUser{
    overflow: hidden;
}
.mediaUser img{
        float: left;
    width: 45px;
    border-radius: 50%;
    margin: 8px 5px;
}
.mediaUser p{
    float: left;
    line-height: 60px;
}
.content{
    margin-top: 18px;
}
.content img{
    width: 100%;
}
.content p{
   text-indent: 1.8em;
    line-height: 27px;
}

.p_time{
    float: right;
   color: grey;
}
.v-touch{
 touch-action: pan-y!important;
}
.Dark{
  background-color:rgb(34,33,38);
  border-bottom: 1px solid rgb(52,55,64);
  color: #fff!important;
  span{
    color: #fff!important;
  }
}

</style>
